<template>
	<div class="cmsarticle-edit padding10">
		<el-form label-position="left" label-width="150px" ref="form" :model="form" :rules="rules">
			<el-row :gutter="20">
				<el-col :span="15">
					<div class="header">
						<div class="title">写文章</div>
					</div>
					<el-form-item prop="title">
						<template #label>
							<div style="text-align: center;">文章标题</div>
						</template>
						<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题" clearable></el-input>
					</el-form-item>
					<el-form-item prop="contents">
						<template #label>
							<div style="text-align: center;">文章内容</div>
						</template>
						<fortress-editor v-model="form.contents"></fortress-editor>
					</el-form-item>

					<div class="header">
						<div class="title">默认属性</div>
					</div>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">发布时间</div>
						</template>
						<el-date-picker
							v-model="form.pubdate"
							align="right"
							type="datetime"
							placeholder="选择发布时间"
							value-format="yyyy-MM-dd HH:mm:ss"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">文章摘要</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-input type="textarea" :rows="2" placeholder="请输入摘要" v-model="form.info" clearable></el-input>
							</el-col>
							<el-col :span="2">
								<el-button size="mini" type="primary">一键识别</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">文章属性</div>
						</template>
						<el-checkbox-group v-model="form.attr">
							<el-checkbox v-for="item in attrList" :label="item.id" :key="item.id">{{ item.title }}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">所属专题</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-select v-model="form.special" multiple clearable style="width: 100%">
									<el-option v-for="item in specialList" :value="item.id" :label="item.name" :key="item.id">
										{{ item.name }}
									</el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">TAG标签</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-select
									v-model="form.tags"
									multiple
									filterable
									allow-create
									default-first-option
									clearable
									placeholder="请选择文章标签"
									style="width: 100%"
								>
									<el-option v-for="item in tagList" :key="item.id" :label="item.title" :value="item.id"></el-option>
								</el-select>
							</el-col>
							<el-col :span="2">
								<el-button size="mini" type="primary">一键识别</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">SEO关键字</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-input
									type="textarea"
									autosize
									placeholder="请输入SEO关键字"
									v-model="form.keywords"
									clearable
								></el-input>
							</el-col>
							<el-col :span="2">
								<el-button size="mini" type="primary">一键识别</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">浏览量</div>
						</template>
						<el-input type="number" clearable v-model="form.click" placeholder="请输入浏览量"></el-input>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">
								权重
								<el-tooltip content="提示文字" placement="top">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</div>
						</template>
						<el-input type="number" clearable v-model="form.sort" placeholder="请输入权重"></el-input>
					</el-form-item>

					<!-- <div class="header">
						<div class="title">附件上传</div>
					</div>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">附件上传</div>
						</template>
						<fortress-upload type="file" name="annexs" v-model="form"></fortress-upload>
						<resource-select modelName="form.annexs" type="image" @choosed="resourceChoosed"></resource-select>
					</el-form-item>

					<div class="header">
						<div class="title">图片</div>
					</div>
					<div class="mb">
						<fortress-upload type="image" name="picname" v-model="form"></fortress-upload>
						<resource-select modelName="form.picname" type="image" @choosed="resourceChoosed"></resource-select>
					</div> -->
					<div v-for="(item, index) in expandedFields" :key="index">
						<div class="header">
							<div class="title">{{ item.colTitle }}</div>
						</div>
						<el-form-item v-if="item.formType == 1">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<el-input v-model="colData[item.propName]" :placeholder="`请输入${item.colTitle}`" clearable></el-input>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 2">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 多行文本 2-->
							<el-input
								type="textarea"
								:rows="2"
								:placeholder="`请输入${item.colTitle}`"
								v-model="colData[item.propName]"
							></el-input>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 3">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 富文本 3-->
							<fortress-editor v-model="colData[item.propName]"></fortress-editor>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 4">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 下拉 4-->
							<el-select v-model="colData[item.propName]" placeholder="请选择">
								<el-option v-for="c in item.listdataConfig" :label="c" :key="c" :value="c"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 5">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 单选框 5-->
							<el-radio-group v-model="colData[item.propName]">
								<el-radio v-for="c in item.listdataConfig" :label="c" :key="c">{{ c }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 6">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 复选框 6-->
							<el-checkbox-group v-model="colData[item.propName]">
								<el-checkbox v-for="c in item.listdataConfig" :label="c" :key="c">{{ c }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 7">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 日期 7-->
							<el-date-picker
								v-model="colData[item.propName]"
								type="date"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
							></el-date-picker>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 8">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 日期时间 8-->
							<el-date-picker
								v-model="colData[item.propName]"
								type="datetime"
								placeholder="选择日期时间"
								value-format="yyyy-MM-dd HH:mm:ss"
							></el-date-picker>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 9">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 图片上传组件 9-->
							<template v-if="item.limitSize > 1">
								<fortress-upload
									type="image"
									:name="item.propName"
									:formData="colData"
									:multiple="true"
									:limit="item.limitSize"
								></fortress-upload>
								<resource-select
									:modelName="`colData.${item.propName}`"
									type="image"
									:multiple="true"
									@choosed="resourceChoosed"
								></resource-select>
							</template>
							<template v-else>
								<fortress-upload type="image" :name="item.propName" :formData="colData"></fortress-upload>
								<resource-select
									:modelName="`colData.${item.propName}`"
									type="image"
									@choosed="resourceChoosed"
								></resource-select>
							</template>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 10">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 文件上传组件 10 默认多个-->
							<fortress-upload
								type="file"
								:formData="colData"
								:multiple="true"
								:limit="item.limitSize"
								:name="item.propName"
							></fortress-upload>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 11">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 视频上传组件 11-->
							<fortress-upload type="video" :formData="colData" :limit="1" :name="item.propName"></fortress-upload>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 12">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 开关 12-->
							<el-switch v-model="colData[item.propName]" active-text="按月付费" inactive-text="按年付费"></el-switch>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 13">
							<template #label>
								<div style="text-align: center;">{{ item.colTitle }}</div>
							</template>
							<!-- 计数器 13-->
							<el-input-number v-model="colData[item.propName]"></el-input-number>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="9">
					<div class="button-group">
						<!-- <el-button class="button" type="primary" size="medium" @click="submit('save')" v-if="form.auditflag">
							审 核
						</el-button>
						<el-button class="button" type="primary" size="medium" @click="submit('save')" v-else>发 布</el-button> -->
						<el-button class="button" type="success" size="medium" @click="openAudit(2)">审核通过</el-button>
						<el-button class="button" type="danger" size="medium" @click="openAudit(3)">审核拒绝</el-button>
						<div class="plac"></div>
						<!-- <div class="delete button">
							<i class="el-icon-delete"></i>
							移至垃圾箱
						</div> -->
					</div>

					<div class="header">
						<div class="title">所属栏目</div>
					</div>
					<div class="column mb">
						<v-column v-model="form.channelId" :name.sync="form.channelIdName"></v-column>
					</div>

					<div class="header">
						<div class="title">缩略图</div>
					</div>
					<div class="mb">
						<fortress-upload type="image" name="picname" v-model="form"></fortress-upload>
						<resource-select modelName="form.picname" type="image" @choosed="resourceChoosed"></resource-select>
					</div>

					<!-- <div class="header">
						<div class="title">审核人</div>
					</div>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">是否需要审核</div>
						</template>
						<el-switch v-model="form.auditflag" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
					</el-form-item>
					<el-form-item v-show="form.auditflag">
						<template #label>
							<div style="text-align: center;">审核人</div>
						</template>
						<el-input
							@click.native="auditerVisible = true"
							type="text"
							clearable
							:value="form.auditUser.map(item => item.realName) + ''"
							readonly
							suffix-icon="el-icon-user"
						/>
					</el-form-item> -->
				</el-col>
			</el-row>
		</el-form>

		<el-dialog
			:visible.sync="auditerVisible"
			append-to-body
			modal-append-to-body
			title="审核人"
			width="50%"
			:close-on-click-modal="false"
		>
			<el-input type="textarea" rows="5" placeholder="请输入审核意见" v-model="form.auditop"></el-input>
			<template #footer>
				<el-button type="danger" @click="cancelAuditer">取消</el-button>
				<el-button type="success" @click="confirmAuditer">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
// import request from "@/common/request"
import { ct } from "@/mixins/mixmethod.js"

import VColumn from "./components/column.vue"
// import VAuditer from "./components/auditer.vue"
import ResourceSelect from "@/components/resource-select.vue"

import { enumList } from "@/api/public.api.js"
import { cmssystagList } from "@/api/cms/cmssystag.js"
import { cmscusttagList } from "@/api/cms/cmscusttag.js"
import { cmssubjectList } from "@/api/cms/cmssubject.js"
import { cmschannelCols } from "@/api/cms/cmschannel.js"
import { cmsarticleInfo, cmsarticleAudit } from "@/api/cms/cmsarticle.js"

export default {
	name: "cmsarticle-edit",
	mixins: [ct],
	data() {
		return {
			form: {
				id: "",
				modelId: "",
				title: "",
				author: "",
				source: "",
				contents: "",
				info: "",
				keywords: "",
				picname: "",
				publisher: "",
				pubdate: "",
				url: "",
				click: "",
				sort: "",
				auditer: "",
				auditop: "",
				channelId: "",
				channelIdName: "",
				attr: [],
				tags: [],
				special: [],
				colData: {},

				annexs: "",
				people: "",
				// auditUser: [],
				// auditflag: false,
			},
			rules: {
				title: [{ required: true, message: "请输入标题", trigger: "blur" }],
				// contents: [{ required: true, message: "请输入内容", trigger: "blur" }],
				channelId: [{ required: true, message: "请输入栏目", trigger: "blur" }],
			},

			attrList: [], // 文章属性
			tagList: [], // TAG标签
			specialList: [], // 专题
			ArticleStatus_cmsList: [], // 文章状态

			auditerVisible: false, // 审核弹窗

			expandedFields: [],
			colData: {
				dhwb: "",
				duohwb: "",
				rq: "",
				rqshj: "",
				kg: "",
				jshq: "",
				detime: "",
				downnum: "",
				fabiao: "",
				fujian: "",
				fuwenben: "",
				jieshao: "",
				keshi: "",
				sex: "",
				pinpai: "",
				video: "",
				xingqu: "",
				zhicheng: "",
				zhuanye: "",
				pic: "",
			},
		}
	},
	computed: {
		isEdit() {
			return !!this.$route.query.id
		},
	},
	created() {
		this.form.id = this.$route.query.id || ""
		this.getAttrList()
		if (this.isEdit) {
			this.getArticleInfo()
		}
	},
	methods: {
		getAttrList() {
			cmssystagList().then(({ code, data }) => {
				if (code == 0) {
					this.attrList = data
				}
			})
			cmscusttagList().then(({ code, data }) => {
				if (code == 0) {
					this.tagList = data
				}
			})
			cmssubjectList().then(({ code, data }) => {
				if (code == 0) {
					this.specialList = data
				}
			})
			enumList("ArticleStatus", "cms").then(({ code, data }) => {
				if (code == 0) {
					this.ArticleStatus_cmsList = data
				}
			})
		},
		async getArticleInfo() {
			const { code, data, msg } = await cmsarticleInfo(this.form.id)
			if (code != 0) {
				return this.$message.error(msg)
			}

			this.colData = Object.assign(this.colData, data.colData)
			this.form = Object.assign(this.form, data)
		},
		async getExpandedFields() {
			const { code, data, msg } = await cmschannelCols(this.form.channelId)
			if (code != 0) {
				return this.$message.error(msg)
			}

			data.cols.map(item => {
				if (item.listdataConfig) {
					item.listdataConfig = item.listdataConfig.split(",")
				}
				this.colData[item.propName] = this.colData[item.propName] || ""
			})
			this.form.modelId = data.modelId
			this.expandedFields = data.cols
		},
		openAudit(status) {
			this.form.auditop = ""
			this.$refs["form"].validate(error => {
				if (!error) {
					console.log(error)
					return
				}
				this.form.status = status
				if (status == 3) {
					this.auditerVisible = true
				} else {
					this.$confirm("是否通过此文章?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}).then(() => {
						this.confirmAuditer()
					})
				}
			})
		},
		cancelAuditer() {
			this.auditerVisible = false
			this.form.auditop = ""
		},
		async confirmAuditer() {
			if (!this.form.pubdate) {
				this.form.pubdate = `${new Date().getFullYear()}-${new Date().getMonth() +
					1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
			}

			this.expandedFields.map(item => {
				this.form.colData[item.propName] = this.colData[item.propName]
			})

			try {
				const { code, msg } = await cmsarticleAudit(this.form)
				if (code != 0) {
					throw new Error(msg)
				}
				this.$message.success("操作成功")
				this.$router.go(-1)
				this.cancelAuditer()
			} catch (error) {
				this.$message.error("提交错误, 请检查数据")
				console.log(error)
			}
		},
	},
	watch: {
		"form.channelId"() {
			this.getExpandedFields()
		},
	},
	components: {
		ResourceSelect,
		VColumn,
		// VAuditer,
	},
}
</script>

<style lang="scss" scoped>
.mb {
	margin-bottom: 15px;
}
.padding10 {
	padding: 10px 20px;
	background-color: #fff;
	/* max-height: 600px; */
	overflow: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px 0 rgba(#000, 0.05);
}
.header {
	height: 47px;
	font-size: 16px;
	color: #515a6e;
	background: #f0f0f0;
	border-radius: 6px 6px 0 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	margin-bottom: 15px;
	.title {
		margin-left: 38px;
		line-height: 40px;
		padding: 0 10px;
		background: #fff;
		border-radius: inherit;
	}
}
.upload-button {
	position: relative;
	.upload-input {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
		&::-webkit-file-upload-button {
			cursor: pointer;
		}
	}
}

.button-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	.button {
		white-space: nowrap;
		flex: none;
	}
	.plac {
		width: 100%;
	}
	.delete {
		color: #0cafcc;
		cursor: pointer;
	}
}

.column {
	max-height: 436px;
	overflow-y: auto;
}
</style>

<style lang="scss">
.cmsarticle-edit {
	.ele-form {
		.el-col {
			width: 100%;
		}
	}
}
.el-form--label-left .el-form-item__label {
	display: flex;
	justify-content: flex-end;
}
</style>
